import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Book from './Book';
@connect(({ shareOptionManageM, bookM }) => ({ shareOptionManageM, bookM }))
export default class OptionContent extends PureComponent {
  state = {};
  scrollRef = React.createRef();
  componentDidUpdate() {}

  render() {
    const {
      bookM: { mapData },
      type,
    } = this.props;
    let number = 0;
    mapData.forEach((element) => {
      number = number + element.info.length * 225 + (element.info.length + 1) * 20;
    });
    return (
      <div className='optionContent' style={{ width: '100%', height: '100%' }}>
        {mapData && mapData.length > 0 ? (
          <div ref={this.scrollRef} style={{ width: number + 300 + 'px', minWidth: '100%', height: '100%', display: 'flex', justifyContent: 'flex-start' }}>
            {mapData.map((item, index) => {
              return <Book key={'book_' + index} dataSource={item} type={type} />;
            })}
          </div>
        ) : (
          <div style={{ width: '100%', height: '100%', textAlign: 'center', backgroundColor: '#d8d8d8', paddingTop: '100px', fontSize: '16px' }}>请添加簿记</div>
        )}
      </div>
    );
  }
}
